<template>
  <div>
    <h3>呼叫盲区检查</h3>
    <!-- 原生日期选择器和查询按钮 -->
    <div style="margin-bottom: 20px;">
      <input
          type="date"
          v-model="selectedDate"
          @change="handleDateChange"
      />
      <el-button type="primary" @click="handleQuery">查询</el-button>
    </div>
    <!-- 数据表格 -->
    <el-table :data="blindData" v-loading="isLoading">
      <el-table-column prop="areacode" label="区号" />
      <el-table-column prop="city" label="城市" />
      <el-table-column prop="calltotal" label="呼叫次数" />
      <el-table-column label="接通率">
        <template #default="{ row }">
          <el-progress
              :percentage="calculateSuccessRate(row)"
              :color="customColors"
              :show-text="true"
          />
        </template>
      </el-table-column>
    </el-table>
    <!-- 加载提示 -->
    <div v-if="isLoading" style="margin-top: 20px; color: #909399;">
      正在计算中，数据量较大，等待时间会很长...
    </div>
  </div>
</template>

<script setup>
import {ref, onMounted} from 'vue'
import api from '../api'
import {ElMessage} from 'element-plus' // 引入 ElMessage 组件

const blindData = ref([]) // 存储盲区数据
const selectedDate = ref('') // 用于绑定选择的日期
const isLoading = ref(false) // 加载状态

// 自定义进度条颜色
const customColors = [
  {color: '#f56c6c', percentage: 20},
  {color: '#e6a23c', percentage: 40},
  {color: '#5cb87a', percentage: 60},
  {color: '#1989fa', percentage: 80},
  {color: '#6f7ad3', percentage: 100}
]

// 计算接通率
const calculateSuccessRate = (row) => {
  if (row.calltotal === 0) return 0 // 避免除以零
  const rate = (row.uptotal / row.calltotal) * 100
  return Math.round(rate * 100) / 100 // 保留两位小数
}

// 获取当前日期并格式化为 YYYY-MM-DD
const getCurrentDate = () => {
  const now = new Date()
  const year = now.getFullYear()
  const month = String(now.getMonth() + 1).padStart(2, '0') // 月份补零
  const day = String(now.getDate()).padStart(2, '0') // 日期补零
  return `${year}-${month}-${day}`
}

// 获取盲区数据
const fetchBlindData = async (date) => {
  isLoading.value = true // 开始加载
  blindData.value = [] // 清空表格数据
  try {
    const res = await api.getBlindArea(date)
    if (res.data.status === 0) {
      // 如果 status=0，显示错误信息
      ElMessage.error(res.data.message || '获取数据失败')
    } else {
      blindData.value = res.data.data
    }
  } catch (error) {
    console.error('获取盲区数据失败:', error)
    ElMessage.error(res.data.message || '请求失败，请检查网络或稍后重试')
  } finally {
    isLoading.value = false // 结束加载
  }
}

// 初始化加载数据
onMounted(async () => {
  const currentDate = getCurrentDate() // 获取当前日期
  selectedDate.value = currentDate // 设置默认日期为当前日期
  await fetchBlindData(currentDate) // 加载当前日期的数据
})

// 日期变化时的处理函数
const handleDateChange = () => {
  console.log('选择的日期:', selectedDate.value) // 调试
}

// 查询按钮点击事件
const handleQuery = async () => {
  if (selectedDate.value) {
    console.log('提交查询日期:', selectedDate.value) // 调试
    await fetchBlindData(selectedDate.value) // 根据选择的日期重新加载数据
  } else {
    ElMessage.warning('请选择日期') // 提示用户选择日期
  }
}
</script>

<style scoped>
/* 可以根据需要添加样式 */
</style>